<template>
    <div class="app-container">
        <el-form ref="elForm" :model="formData" :disabled="$route.query.isInfo || isInfo" :rules="rules" size="medium"
            label-width="100px">
            <h2 style="text-align: center">添加合同</h2>
            <h4 class="form-header h4">基本信息</h4>
            <el-row :gutter="15">
                <el-col :span="6">
                    <el-form-item label="合同编号" prop="contractCode">
                        <el-input v-model="formData.contractCode" placeholder="保存后自动生成" :disabled="true" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="合同类型" prop="contractType">
                        <el-input v-model="formData.contractType" placeholder="请输入合同类型" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="6">
            <el-form-item label="报销类型" prop="payTypeValue">
              <el-select
                v-model="formData.payTypeValue"
                filterable
                placeholder="请选择报销类型"
              >
                <el-option
                  v-for="dict in dict.type.sys_fee_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
   -->
                <!-- <el-col :span="6">
            <el-form-item label="申请总额" prop="totalFee">
              <el-input
                v-model="formData.totalFee"
                placeholder="请输入申请总额"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col> -->
                <!-- <el-col :span="6">
            <el-form-item label="所属项目" prop="projectName">
              <el-select
                :style="{ width: '100%' }"
                v-model="formData.projectName"
                filterable
                placeholder="请选择所属项目"
              >
                <el-option
                  v-for="dict in projectList"
                  :key="dict.projectId"
                  :label="dict.projectName"
                  :value="dict.projectName"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
                <el-col :span="6">
                    <el-form-item label="供应方" prop="supplier">
                        <el-input v-model="formData.supplier" placeholder="请输入供应方" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="设备编号" prop="deviceCode">
                        <el-input v-model="formData.deviceCode" placeholder="保存后自动生成"  clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="设备名称" prop="deviceName">
                        <el-input v-model="formData.deviceName" placeholder="请输入设备名称" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="合同签订人" prop="userId">
                        <UserDialog  placeholder="请输入合同签订人" @change="changeUser"
                            v-model="formData.userId"></UserDialog>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="合同签订日期" prop="signTime">
                        <el-date-picker v-model="formData.signTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择合同签订日期" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="有效时间" prop="effectiveTime">
                        <el-date-picker v-model="formData.effectiveTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择有效时间" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="formData.remark" type="textarea" placeholder="请输入多行文本备注"
                    :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
            </el-form-item>

            <h4 class="form-header h4">附件</h4>
            <el-form-item label="" prop="attachmentUrl">
                <FileUpload :isDelete="!$route.query.isInf" v-model="formData.attachmentUrl"></FileUpload>
            </el-form-item>
            <el-col :span="24" v-if="btnShow">
                <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
                    <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
                    <el-button :disabled="false" @click="resetForm">返回</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
  
<script>
import store from "@/store";


import { projectOtherContractAdd,projectOtherContractInfo,projectOtherContractEdit } from "@/api/cultivate/contractsOther.js";
import { listSelect } from "@/api/business/project.js";
import Cookies from "js-cookie";
export default {
    name: "AddBxgl",
    components: {},
    dicts: ["sys_fee_subject", "sys_fee_type"],

    props: {
        isInfo: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: "",
        },
        btnShow: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            totalFee: 0,
            name: store.getters.name,
            projectList: [],
            formData: {
                contractCode: undefined,
                contractType: undefined,
                payTypeValue: undefined,
                totalFee: undefined,
                projectName: undefined,
                deviceName: undefined,
                receiverUserId: undefined,
                receiverUserName: undefined,
                effectiveTime:'',
                supplier: "",
                attachmentUrl: undefined,
                userId: "",
                // details: [{ fee: "", info: "", subjectValue: "" }],
            },
            rules: {
                effectiveTime: [
                    {
                        required: true,
                        message: "请输入费用详细",
                        trigger: "blur",
                    },
                ],
                remark: [
                    {
                        required: false,
                        message: "请输入多行文本备注",
                        trigger: "blur",
                    },
                ],
                signTime: [
                    {
                        required: true,
                        message: "请选择签订时间",
                        trigger: "blur",
                    },
                ],
                attachmentUrl: [
                    {
                        required: false,
                        message: "附件不能为空",
                        trigger: "change",
                    },
                ],
                supplier: [
                    {
                        required: true,
                        message: "供应方不能为空",
                        trigger: "change",
                    },
                ],
                contractCode: [],
                contractType: [
                    {
                        required: true,
                        message: "请输入合同类型",
                        trigger: "blur",
                    },
                ],
                deviceName: [
                    {
                        required: true,
                        message: "请输入设备名称",
                        trigger: "blur",
                    },
                ],
                userId: [
                    {
                        required: true,
                        message: "请选择签订人",
                        trigger: "blur",
                    },
                ],
                name: [],
            },
        };
    },
    computed: {},
  
    created() {
        if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
            this.getinfo();
        }else{

        }
       
       
    },
    mounted() { },
    methods: {
       
        changeUser(e) {
            console.log(e);
            this.formData.userName = e.nickName;
        },
        getinfo() {
            return projectOtherContractInfo(this.$route.query.id || this.id).then((response) => {
                console.log(response);
                this.formData = response.data;
            });
        },
        submitForm() {
            console.log(this.formData);
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    let query = JSON.parse(JSON.stringify(this.formData));
                    if (this.formData.projectOtherContractId != undefined) {
                        projectOtherContractEdit(query).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.resetForm();
                        });
                    } else {
                        projectOtherContractAdd(query).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.resetForm();
                        });
                    }
                }
            });
        },
        resetForm() {
            const obj = { path: "./bxgl" };
            this.$tab.closeOpenPage();
        },
    },
};
</script>
  